<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :span="12"
        ><el-input
          placeholder="请输入内容"
          v-model="search"
          class="input-with-select"
        >
          <template #append>
            <el-button icon="el-icon-search" @click="handleSearch"></el-button>
          </template>
        </el-input>
      </el-col>
      <el-col :span="4"
        ><el-button type="primary" @click="$router.push('./edit')"
          >新增商品</el-button
        ></el-col
      >
    </el-row>
    <div class="list">
      <el-table :data="tableData.value" :stripe="true">
        <el-table-column fixed prop="code" label="编号" width="150">
        </el-table-column>
        <el-table-column prop="name" label="名称" width="300">
        </el-table-column>
        <el-table-column prop="price" label="价格" width="100">
        </el-table-column>
        <el-table-column prop="stock" label="库存" width="100">
        </el-table-column>
        <el-table-column label="状态" width="50">
          <template #default="scope">
            <span
              :style="{ color: scope.row.status === '1' ? 'green' : 'red' }"
              >{{ statusList[scope.row.status] }}</span
            >
          </template>
        </el-table-column>
        <el-table-column label="操作" width="100">
          <template #default="scope">
            <el-button
              @click="handleShowDetail(scope.row)"
              type="text"
              size="small"
              >查看</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleEditProduct(scope.row)"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script lang="ts">
import { ref, reactive, onMounted, defineComponent } from "vue";
import { getList, getFilterList } from "@/api/index";
import { useRouter } from "vue-router";
import { statusList } from "@/utils/tools";

export default defineComponent({
  name: "Home",
  setup() {
    let search = ref("");
    let tableData = reactive({ value: [] as any });
    const router = useRouter();

    onMounted(() => {
      init();
    });

    const init = async () => {
      const result = await getList();
      tableData.value = result as any;
    };

    const handleShowDetail = (row: any) => {
      router.push({
        path: "./detail",
        query: {
          code: row.id,
        },
      });
    };

    const handleEditProduct = (row: any) => {
      router.push({
        path: "./edit",
        query: {
          code: row.id,
        },
      });
    };

    const handleSearch = async () => {
      const result = await getFilterList(search);
      tableData.value = result as any;
    };

    return {
      statusList,
      search,
      tableData,
      handleShowDetail,
      handleEditProduct,
      handleSearch,
    };
  },
});
</script>
<style scoped>
.home {
  width: 800px;
  margin: 10px auto;
}
.list {
  width: 800px;
}
</style>
